<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级分类页面</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/common.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/ej_class.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/detail.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/bootstrap3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/bootstrap3/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/jqzoom.css" type="text/css"></link>    
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/bootstrap.min.js"></script>
<script>
	$(function(){
		$("#sc").click(function(){
			var pid = ${products.pid};
			var pname = "${products.pname}";
			var shopPrice = ${products.shopPrice };
			var image = "${products.image}";
			var uid = ${user.uid};
			$.ajax({
				type:"post",
				url:"<%=request.getContextPath()%>/personal/collect",
				data:{pid:pid,pname:pname,shopPrice:shopPrice,image:image,uid:uid},
				success:function(obj){
					alert("添加成功！");
					location.href="<%=request.getContextPath()%>/product/goods?pid="+pid;
				},
				dataType:"json"
			})
		})
	})
	
</script>
</head>
<body>
<%@include file="menu.jsp" %>
<div class="w_980 m">
  <div class="w_980 fl_l">
    <div class="w_200 fl_l">
      <div class="w_200 bor fl_l ma_t10">
        <div class="title">本周热销单品</div>
        <ul class="rxdp">
          <c:forEach items="${listProducts}" var="d" varStatus="f">
	          	
	            <li> <span class="rxdp_hot">${f.index}</span>
	            
	            <div class="rxdp_img"><a href=" "><img src="<%=request.getContextPath() %>/${d.image}" width="40" height="40" /></a></div>
	            <div class="rxdp_name"><a href="">${d.pname}</a></div>
	            <div class="rxdp_price">￥${d.market_price}</div>
	         	</li>
          </c:forEach>          
        </ul>
      </div> 
    </div>
    <div class="w_770 fl_r">
      <div class="w_770 fl_l">
        <div class="l_310 ma_b10">
          <div class="pic_310 ma_b10">
          <div id="small-container">

			<div id="mark-container"></div>

			<div id="float-container"></div>

			<img src="<%=request.getContextPath() %>/${products.image}" alt="" style="width: 180px;height: 180px" alt=""  jqimg="<%=request.getContextPath() %>/${products.image}" id="bigImg"/>
                
		</div> 
        <div id="big-container">

			<img src="<%=request.getContextPath() %>/${products.image}" alt="">

		</div>
        
        </div>   
          
        </div>
        <div class="r_450">
          <table width="100%" border="0" cellspacing="10" cellpadding="0">
            <tr>
              <td class="bor_b font_c_14 pa_b5"><span style="font-size: 20px;color: orange;margin-top: 20px">${products.pname}</span></td>
            </tr>
            <tr>
              <td class="font_999">  商品编号：${products.pid}</td>
            </tr>
            <tr>
              <td>市场价：<span class="font_999 thro">￥<span>${products.marketPrice}</span></span></td>
            </tr>
            <tr>
              <td>价  格：<span class="font_red">￥<span></span></span><span class="red_24">${products.shopPrice }</span></td>
            </tr>
            <tr>
              <td><table width="100%" border="0" cellspacing="2" cellpadding="0" class="table_CCC">
                  <tr>
                    <td width="10%" height="40" align="right" class="bor_dashed">数量：</td>
                    <td width="90%" class="bor_dashed"><input name="textfield2" type="text" size="10" class="input_CCC" />
                      件</td>
                  </tr>
                  <tr>
                    <td height="60" colspan="2">&nbsp;&nbsp;<a href="#"><img src="<%=request.getContextPath() %>/images/gwc.jpg" width="160" height="37" /></a>
                      <a id="sc"><input type="image" name="Submit2" src="<%=request.getContextPath() %>/images/shouc.jpg"/></a></td>
                  </tr>
                </table></td>
            </tr>
          </table>
        </div>
        <div class="ejnav">
          <ul>
            <li class="select"><a href="#">商品介绍</a> </li>
            <!-- <li><a href="#">规格参数</a> </li>
            <li><a href="#">上架时间</a> </li> -->
          </ul>
          <div class="ejnav_content fl_l">${products.pdesc}
            
         </div>
        </div>
        <div class=" clear"></div>
        <div class="ejnav">
          <ul>
            <li class="select"><a href="#">发表评论</a></li>
            <li><a href="#">全部评论</a> </li>
          </ul>
          <div class="ejnav_content fl_l" style="padding-left:0;">
            <p>
              <textarea name="textarea" cols="80" rows="5" class="te_bor" id="textarea"></textarea>
              <br/>
            </p>
            <p>
              <input type="submit" name="button" value="发表评论" class="btn1 font14" />
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom fl_l ma_t10">
    <div class="footlink">
      <div class="footlinkt">配送范围</div>
      <ul>
        <li><a href="">上海 |  北京 |  其他地区</a></li>
        <li><a href="">配送费收取标准</a></li>
      </ul>
    </div>
    <div class="footlink">
      <div class="footlinkt">服务说明</div>
      <ul>
        <li><a href="">付款方式</a></li>
        <li><a href="">服务协议 </a></li>
      </ul>
    </div>
    <div class="footlink">
      <div class="footlinkt">我的订单</div>
      <ul>
        <li><a href="">查询订单</a></li>
        <li><a href="">如何下订单</a></li>
      </ul>
    </div>
    <div class="footlink">
      <div class="footlinkt">售后服务</div>
      <ul>
        <li><a href="">退换货原则</a></li>
        <li><a href="">在线客服区</a></li>
        <li><a href="">在线客服区</a></li>
      </ul>
    </div>
    <div class="footlink">
      <div class="footlinkt">需要帮助</div>
      <ul>
        <li><a href="">忘记密码</a></li>
        <li><a href="">常见问题</a></li>
        <li><a href="">联系客服人员</a></li>
        <li><a href="">抵用券使用说明</a></li>
      </ul>
    </div>
  </div>
  <div class="w_980 fl_l ma_t10">
    <ul class="footerpic1">
      <li><a href=" "><img src="<%=request.getContextPath() %>/images/wmjl.jpg" width="217" height="49" /></a></li>
      <li><a href=" "><img src="<%=request.getContextPath() %>/images/mbby.jpg" width="217" height="49" /></a></li>
      <li><a href=" "><img src="<%=request.getContextPath() %>/images/gkzs.jpg" width="217" height="49" /></a></li>
    </ul>
  </div>
  <div class="w_980 fl_l ma_t10 te_m">关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 移动终端 | 友情链接 | 销售联盟 <br />
    北京市公安局海淀分局备案编号：11010233381  京ICP证070的4523号 <br />
    Copyright2004-2011  乐酷商城 版权所有</div>
  <div class="w_980 fl_l ma_t10">
    <ul class="footerpic">
      <li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_pic_04.gif" width="91" height="31" /></a></li>
      <li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_pic_05.gif" width="91" height="31" /></a></li>
      <li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_pic_06.gif" width="91" height="31" /></a></li>
      <li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_pic_07.gif" width="91" height="31" /></a></li>
      <li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_pic_09.gif" width="91" height="31" /></a></li>
      <li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_cnnic.jpg" width="91" height="31" /></a></li>
    </ul>
  </div>
</div>
</body>
</html>
   <style>

		/*

			最外层容器id=demo

		*/

		#container{

			display: block;

			width: 180px;

			height: 180px;

			margin: 50px;

			position: relative;

			border: 1px solid #ccc;

		}


		/*

			原图容器id=small-Container

		*/

		#small-container{

			position: relative;

			z-index: 1;

		}


		/*

			原图上的图层id=mark-container

		*/

		#mark-container{

			position: absolute;

			display: block;

			width: 180px;

			height: 180px;

			background-color: #FFF;

			opacity: 0;

			z-index: 2;

			cursor: move;

		}


		/*

			原图上的移动图层id=float-Container

		*/

		#float-container{

			display: none;

			width: 80px;

			height: 80px;

			position: absolute;

			background-color: #F5F5DC;

			border: 1px solid #ccc;

			filter:alpha(opacity=50);

			opacity: 0.5;

		}


		/*

			大图容器id=big-Container

		*/

		#big-container{

			display: none;

			position: absolute;

			top: 0;

			left: 700px;

			width: 200px;

			height: 200px;

			overflow: hidden;

			border: 1px solid #ccc;

			z-index: 1;

		}


		/*

			大图片

		*/

		#big-container img{

			position: absolute;

			z-index: 2;

		}

</style>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script>

		$(function(){

			var objContainer = $("#container");

			var objSmallContainer = $("#small-container");

			var objMarkContainer = $("#mark-container");

			var objFloatContainer = $("#float-container");

			var objBigContainer = $("#big-container");

			var objBigImage = $(objBigContainer).children('img');


			//鼠标移入事件

			$(objMarkContainer).mouseover(function(event) {

				$(objFloatContainer).css({

					display: 'block'

				});


				$(objBigContainer).css({

					display: 'block'

				});

			});


			//鼠标移出事件

			$(objMarkContainer).mouseout(function(event) {

				$(objFloatContainer).css({

					display: 'none'

				});


				$(objBigContainer).css({

					display: 'none'

				});

			});


			//鼠标移动事件

			$(objMarkContainer).mousemove(function(event) {

				var _event = event || window.event;


				var clientX = _event.clientX;

				var clientY = _event.clientY;


				var objContainerOffsetLeft = $(objContainer).offset().left;

				var objContainerOffsetTop = $(objContainer).offset().top;


				var objSmallContainerOffsetLeft = $(objSmallContainer).offset().left;

				var objSmallContainerOffsetTop = $(objSmallContainer).offset().top;


				var objFloatContainerWidth = $(objFloatContainer).outerWidth();

				var objFloatContainerHeight = $(objFloatContainer).outerHeight();


				var objMarkContainerWidth = $(objMarkContainer).outerWidth();

				var objMarkContainerHeight = $(objMarkContainer).outerHeight();


				var objBigContainerWidth = $(objBigContainer).outerWidth();

				var objBigContainerHeight = $(objBigContainer).outerHeight();


				var objBigImageWidth = $(objBigImage).outerWidth();

				var objBigImageHeight = $(objBigImage).outerHeight();


				var left = clientX - objContainerOffsetLeft - objSmallContainerOffsetLeft - objFloatContainerWidth / 2;

				var top = clientY - objContainerOffsetTop - objSmallContainerOffsetTop - objFloatContainerHeight / 2;


				if (left < 0) {

					left = 0;

				}else if (left > (objMarkContainerWidth - objFloatContainerWidth)) {

					left = objMarkContainerWidth - objFloatContainerWidth;

				}


				if (top < 0) {

					top = 0;

				}else if (top > (objMarkContainerHeight - objFloatContainerHeight)) {

					top = objMarkContainerHeight - objFloatContainerHeight;

				}

				

				$(objFloatContainer).css({

					left: left + 'px',

					top: top + 'px'

				});


				var percentX = left / (objMarkContainerWidth - objFloatContainerWidth);

				var percentY = top / (objMarkContainerHeight - objFloatContainerHeight);


				$(objBigImage).css({

					left: (-percentX * (objBigImageWidth - objBigContainerWidth)) + 'px',

					top: (-percentY * ( objBigImageHeight - objBigContainerHeight)) + 'px'

				});

			});

		});

</script>
    